<template>
<!-- @submit为提交事件，prevent为阻止表单进行提交 -->
  <form class="form-inline" @submit.prevent="onFormSubmit">
    <div class="input-group mb-2 mr-sm-2">
      <div class="input-group-prepend">
        <div class="input-group-text">任务</div>
      </div>
      <!-- v-model进行数据的双向绑定 -->
      <input type="text" class="form-control" placeholder="请输入任务信息" style="width: 356px" v-model.trim="taskname" />
    </div>

    <button type="submit" class="btn btn-primary mb-2">添加新任务</button>
  </form>
</template>

<script>
export default{
    name:'TodoInput',
    // 声明自定义事件add
    emits:['add'],
    data(){
        return{
            taskname:'',
        }
    },
    methods: {
        // 表单的提交事件处理函数
        onFormSubmit(){
            if(!this.taskname){
                return alert('任务名称不能为空！');
            }
            // 触发自定义事件，并向外界传递数据
            this.$emit('add',this.taskname);
            this.taskname='';
        }
    },
}
</script>

<style lang="less" scoped></style>